<template>
  <div id="app">
    <el-container class="app-container">
      <el-header class="app-header">
        <h1>低代码表单生成器</h1>
        <div class="header-actions">
          <el-button type="primary" @click="handlePreview">
            <el-icon><View /></el-icon>
            预览
          </el-button>
          <el-button type="success" @click="saveForm">
            <el-icon><DocumentAdd /></el-icon>
            保存
          </el-button>
        </div>
      </el-header>
      <el-main class="app-main">
        <FormDesigner ref="designer" />
      </el-main>
    </el-container>

    <!-- 预览对话框 -->
    <FormPreview
      v-model:visible="previewVisible"
      :form-items="previewFormItems"
      :form-config="formConfig"
    />
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { View, DocumentAdd } from '@element-plus/icons-vue'
import FormDesigner from './components/FormDesigner.vue'
import FormPreview from './components/FormPreview.vue'

export default {
  name: 'App',
  components: {
    FormDesigner,
    FormPreview,
    View,
    DocumentAdd,
  },
  setup() {
    const previewVisible = ref(false)
    const designer = ref(null)
    const previewFormItems = ref([])
    const formConfig = ref({
      labelWidth: '100px',
      labelPosition: 'right',
    })

    const handlePreview = () => {
      if (designer.value) {
        const formConfigData = designer.value.getFormConfig()
        previewFormItems.value = formConfigData.items
        formConfig.value = formConfigData.config
        previewVisible.value = true
      }
    }

    const saveForm = () => {
      if (designer.value) {
        const formConfig = designer.value.getFormConfig()
        // 这里可以调用API保存表单配置
        console.log('表单配置:', formConfig)
        ElMessage.success('表单保存成功')
      }
    }

    return {
      previewVisible,
      designer,
      previewFormItems,
      formConfig,
      handlePreview,
      saveForm,
    }
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

.app-container {
  height: 100%;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #409eff;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.app-header h1 {
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.app-main {
  padding: 0;
  height: calc(100% - 60px);
}
</style>
